<?php
header("Content-type:text/html;charset=utf-8");
include_once 'commonDB.php';
	?>
	
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.wrap {
				width: 100%;
				height: 100%;
			}
			
			#navigation {
				width: 100%;
				height: 50px;
				background-color: rgba(0, 0, 0, 0.8);
			}
			
			#nav {
				width: 1200px;
				height: 100%;
				margin-left: auto;
				margin-right: auto;
				overflow: hidden;
			}
			
			#nav_log {
				width: 25%;
				height: 100%;
				float: left;
			}
			
			#nav_junp {
				width: 40%;
				height: 100%;
				float: left;
				overflow: hidden;
			}
			
			#nav_junp>div {
				width: 20%;
				height: 100%;
				float: left;
			}
			
			#nav_load {
				width: 35%;
				height: 100%;
				float: right;
				overflow: hidden;
			}
			
			#nav_load>div {
				width: 50%;
				height: 100%;
				float: left;
			}
			
			#grapes_hover {
				width: 100%;
				position: absolute;
				overflow: hidden;
				background-color: white;
				z-index: 1;
			}
			
			#keepout {
				width: 1000px;
				height: 200px;
				margin-left: auto;
				margin-right: auto;
				display: none;
				overflow: hidden;
			}
			
			#keepout>div {
				width: 15%;
				height: 100%;
				float: left;
				position: relative;
			}
			
			#keepout>div>a>img {
				position: absolute;
				top: 10%;
				left: 11%;
				width: 75%;
				height: 55%;
				padding: 0 20px 0 0;
				border-right: 2px solid #ccc;
			}
			
			#abyejiaoly {
				width: 100%;
				height: 220px;
				background-color: whitesmoke;
				
			}
			
			footer {
				width: 1000px;
				height: 100%;
				overflow: hidden;
				margin-left: auto;
				margin-right: auto;
			}
			
			#footer_left {
				width: 20%;
				height: 80%;
				float: left;
				border-bottom: 1px solid #CCCCCC;
			}
			
			#footer_middle {
				width: 60%;
				height: 80%;
				float: left;
				overflow: hidden;
				border-bottom: 1px solid #CCCCCC;
			}
			
			#footer_middle>div {
				width: 20%;
				height: 100%;
				float: left;
			}
			
			#footer_right {
				width: 20%;
				height: 80%;
				float: right;
				border-bottom: 1px solid #CCCCCC;
			}
			
			.head {
				width: 100%;
				height: 1000px;
				background: url('http://mall.file.putaocdn.com/file/5c7da45a0a6aa8229065645844a6382c235b7721.jpg') 50% 50% no-repeat;
				overflow: hidden;
				text-align: center;
			}
			
			.head-top {
				width: 1200px;
				height: 100%;
				margin: 0 auto;
			}
			
			.ios {
				width: 200px;
				height: 60px;
				border-radius: 10px;
				background-color: rgba(0, 0, 0, 0.7);
				float: left;
				margin-top: 500px;
				margin-left: 400px;
			}
			
			.ios>img {
				width: 33px;
				float: left;
				margin-left: 30px;
				margin-top: 10px;
			}
			
			.ios>span {
				color: white;
				font-size: 25px;
				float: left;
				margin-left: 10px;
				margin-top: 20px;
			}
			
			.xiazai {
				width: 250px;
				height: 60px;
				border-radius: 10px;
				background-color: rgba(0, 0, 0, 0.7);
				float: left;
				margin-top: 500px;
				margin-left: 30px;
			}
			
			.xiazai>img {
				width: 33px;
				float: left;
				margin-left: 45px;
				margin-top: 15px;
			}
			
			.xiazai>span {
				color: white;
				font-size: 25px;
				float: left;
				margin-left: 10px;
				margin-top: 20px;
			}
			.txt {
				float: left;
				margin-top: 100px;
				margin-left: 250px;
			}
			.txt>p {
				font-size: 90px;
				margin-bottom: 20px;
			}
			.txt>div{
				font-size: 40px;
				margin-bottom: 20px;
			}
			
			.txt>span {
				font-size: 30px;
				line-height: 30px;
			}
			.middle {
				width: 1200px;
				margin: 0 auto;
				/*overflow: auto;*/
			}
			
			.swiper-container {
				width: 930px;
				height: 342px;
				margin: 20px auto;
			}
			.swiper-wrapper{
				width: 1500px;
				margin-right: 0;
			}
			
			.swiper-slide {
				width: 256px;
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;
			}
			.middle-foot{
				width: 900px;
				height: 880px;
				margin: 0 auto;
			}
			.chunk{
				width: 440px;
				height: 330px;
				text-align: center;
				float: left;
				margin-left: 10px;
			}
			.chunk>img{
				margin-top:50px ;
			}
			.chunk>h2{
				margin-top:50px ;
				margin-bottom: 30px;
			}
			.chunk>span{
				font-size: 15px;
				line-height: 30px;
				color: #CCCCCC;
			}
			.bg{
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.8);
				position: fixed;
				top: 0;
				left: 0;
				z-index: 1;
				display: none;
			}
			.close{
				width: 30px;
				height: 30px;
				color: white;
				background-color: #000000;
				text-align: center;
				line-height: 30px;
				position: absolute;
				top: 0px;
				right: -5%;
			}
			.Bgimg{
				width: 600px;
				height: 795px;
				background-color: white;
				position: fixed;
				top: 50px;
				left: 50%;
				margin-left: -300px;
				z-index: 1;
			}
			.Bgimg>img{
				width: 580px;
				margin-top: 10px;
				margin-left: 10px;
				display: none;
			}
			.stick{
				position: fixed;
				bottom: 5%;
				right: 3%;
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<!--导航-->
			<div id="navigation">
				<!--让导航居中-->
				<div id="nav">
					<!--导航logo-->
					<div id="nav_log" class="nav_log">
						<a id="navloga" href="putou.php"><img class="nav_log_img" src="img/nav_logo.gif" /></a>
					</div>
					<div id="nav_junp" class="nav_jump">
						<!--首页-->
						<div><a id="first" href="putou.php">首页</a></div>
						<!--葡萄产品-->
						<div><a id="grapes" href="###">葡萄产品</a></div>
						<!--葡萄纬度-->
						<div><a id="latitude" href="latitude.php">葡萄纬度</a></div>
						<!--APP下载-->
						<div><a id="APPdownload" href="APP.php">APP下载</a></div>
						<!--嘉年华-->
						<div><a id="carnival" href="JNH.php">嘉年华</a></div>
					</div>
					<div id="nav_load" class="nav_load">
					<!--登陆-->
						<div><a id="load" href="denglu.php">登陆</a></div>
						<!--注册-->
						<div><a id="registered" href="zhuce2.php">注册</a></div>
					</div>
				</div>
			</div>
			<!--隐藏-->
			<div id="grapes_hover">
				<div id="keepout">
					<?php
                         $sql = "select * from putao_chanpin order by id desc limit 6";
                         $result = mysql_query($sql);
                       while ($row =mysql_fetch_assoc($result)) {
                       ?>
                       <div><a href="<?php echo $row["href"]; ?>"><img src="<?php echo $row["scr"]; ?>"/><?php echo $row["txt"]; ?></a></div>
                    
                       <?php } ?>
				</div>
			</div>
			<div class="head">
				<div class="head-top">
					<div class="ios">
						<img src="img/666.png" />
						<span>iOS下载</span>
					</div>
					<div class="xiazai">
						<img src="img/erweima.png" />
						<span>二维码下载</span>,
					</div>
					<div class="txt">
							<p>麦斯丝</p>
							<div>用数字丈量快乐</div>
							<span>神秘的麦斯丝世界,奇幻而为之的冒险,变幻莫测的难关疑题</span><br />
							<span>在这里能让原本枯燥乏味的珠子充满乐趣;</span><br />
							<span>将数字概念虚实结合,软件与游戏硬件配合使用</span><br />
							<span>由浅入深的让孩子发觉数字奥秘,实现真正的同步互动</span>
					</div>
				</div>
			</div>
			<div class="middle">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<img class="swiper-slide" src="http://mall.file.putaocdn.com/file/d2ea37fc2b7717b225219e822224cc35d9578da5_256x342.jpg" title="">
						<img class="swiper-slide" src="http://mall.file.putaocdn.com/file/a7f654cca5ba21284af47e991b3de71f832671c7_256x342.jpg" title="">
						<img class="swiper-slide" src="http://mall.file.putaocdn.com/file/e661c35c285e7ee0332a8ed6842056ddad4e5b12_256x342.jpg" title="">
						<img class="swiper-slide" src="http://mall.file.putaocdn.com/file/f2f0229aa2243cee07c6ae1e5e54aa3915c7554a_256x342.jpg" title="">
						<img class="swiper-slide" src="http://mall.file.putaocdn.com/file/37559418ed6ed6fc147e656d9a0f3bad98ce650c_256x342.jpg" title="">
					</div>
					<div class="swiper-scrollbar"></div>
				</div>
				<div class="bg">
					<div class="	Bgimg">
						<img src="img/d2ea37fc2b7717b225219e822224cc35d9578da5.jpg"/>
						<img src="img/a7f654cca5ba21284af47e991b3de71f832671c7.jpg"/>
						<img src="img/e661c35c285e7ee0332a8ed6842056ddad4e5b12.jpg"/>
						<img src="img/f2f0229aa2243cee07c6ae1e5e54aa3915c7554a.jpg"/>
						<img src="img/37559418ed6ed6fc147e656d9a0f3bad98ce650c.jpg"/>
						<div class="close">x</div>
					</div>
				</div>
				<div class="middle-foot">
					<div class="chunk" style="margin-left: 25%;">
						<img src="img/5a6acca2633abf8a51974610fefb1179bfc51247.png"/><br />
						<h2>代入感极强的冒险故事</h2>
						<span>这一次由淘淘和孩子一起，开启奇幻</span><br />
						<span>而未知的冒险故事，感受数学的神</span><br />
						<span>奇。</span>
					</div>
					<div class="chunk">
						<img src="img/15d935ac1517fd8fbc2a6ad32b64c7743f82c6cd.png"/><br />
						<h2>生动有趣的数字兵，寓教于乐</h2>
						<span>配合生动的剧情展开，快来和数字兵</span><br />
						<span>一起去数字王国冒险吧！</span>
					</div>
					<div class="chunk">
						<img src="img/36ec07a0a4f1d55e343c49ab953fcd2e8536dbb6.png"/><br />
						<h2>实用丰富的数学题型</h2>
						<span>我们的所有题型源自幼小衔接题库，</span><br />
						<span>让孩子边学变玩，以最简单、有趣的</span><br />
						<span>方式解读数学。为孩子、大人解决“幼</span><br />
						<span>升小”头疼的问题。</span>
					</div>
				</div>
			</div>
			<div id="abyejiaoly">
				<footer>
					<div id="footer_left">

					</div>
					<div id="footer_middle">
						<div>
							<h4>订单中心</h4>
							<a href="###">售后政策</a>
							<a href="###">配送常见问题</a>
							<a href="###">支付方式</a>
							<a href="###">支付常见问题</a>
							<a href="###">购物指南</a>
						</div>
						<div>
							<h4>服务支持</h4>
							<a href="###">配送方式</a>
							<a href="###">隐私政策</a>
							<a href="###">账户常见问题</a>
							<a href="###">淘淘向右走常见问题</a>
							<a href="###">班德瑞使用常见问题</a>
						</div>
						<div>
							<h4>商务合作</h4>
							<a href="###">商务合作</a>
						</div>
						<div>
							<h4>关于葡萄</h4>
							<a href="###">关于葡萄</a>
							<a href="###">联系我们</a>
						</div>
						<div>
							<h4>关于我们</h4>
							<a href="###">葡萄纬度</a>
						</div>
					</div>
					<div id="footer_right">
						<a href="###"><img src="img/btn_consult_qq@2x.png" /></a>
						<a href="###"><h2>400-651-6161</h2></a>
					</div>
					<h6>Copyright © 2016, Shanghai Putao Technology Co., Ltd. All Rights Reserved. 上海葡萄纬度科技有限公司</h6>
					<a href="###">沪IC备15015904号-3</a>
				</footer>
			</div>
			<div class="stick">
				<img src="img/shenme.png"/>
			</div>
		</div>
	</body>
	<script src="js/tween.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	var mySwiper = new Swiper('.swiper-container', {
		centeredSlides: false,
		resistance : true,
        scrollbar: '.swiper-scrollbar',
        scrollbarHide: false,
        slidesPerView: 'auto',
        spaceBetween: 15
   		});
   	var imgs1 = document.querySelectorAll(".swiper-wrapper>img");
   	var imgs2 = document.querySelectorAll(".Bgimg>img");
   	var bg = document.querySelector(".bg");
   	var stick = document.querySelector(".stick");
   	for (var i = 0; i < imgs1.length; i++) {
   		imgs1[i].index = i;
   		imgs1[i].onclick = function  () {
   			for (var j = 0; j < imgs2.length; j++) {
   				imgs2[j].style.display = "none";
   			}
   			bg.style.display = "block";
   			imgs2[this.index].style.display = "block";	
   		}
   	}
   	bg.onclick = function  () {
   		bg.style.display = "none";
   	}
   	
   	
   	var timer = null;
		stick.onclick = function () {
			// scrollTop 滚到头属性 设置为0时 滚动到顶部
			clearInterval(timer);
			// DTD模式下不能直接使用body
			// 使用documentElement
			var start = document.body.scrollTop || document.documentElement.scrollTop;
//			var end = 0;
			var change = 0 - start;
			var t = 0;
			var d = 20;
			timer = setInterval(function () {
				t++;
				if (t >= d) {
					clearInterval(timer);
				}
				var speed = Tween.Back.easeOut(t, start, change, d);
				// 区分模式
				if (document.body) {
					document.body.scrollTop = speed;
				} else {
					document.docuemntElement.scrollTop = speed;
				}
			}, 30);
		}
   		
   		
   		
   		
   		
   		
   		
	//                        _oo0oo_
	//                       o88888880o
	//						88"  .  "88
	//						(| - _ - |)
	//						0\   =   /0
	//                	   __/`_____.\__
	//					.' \\|       |//'.
	//     			   / \\|||   :   |||// \
	//				  / _|||||  -:-  |||||_ \
	//				 |   | \\\   -   /// |   |
	//				 | \_|  ''\ --- /''  |_/ |
	//				 \  .-\__   '-'   __/-.  /
	//             ___'.  .'   /--.--\  '.  .'___
	//			. "" '<  `. ___\_<|>_/___.'  >' "".
	//		   | | :    `- \`.;`\ _ /`;.`/ - ` : | |
	//         \  \ `_.     \_ __\ / __ _/   .-` /  /
	//		====`-.____`.____  \______/ ___.-`__.-'====
	//						  `=-----='
	//
	//     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	//   			__________              _________
	//              | 佛祖保佑 |            | 永无BUG |
	//				~~~~~~~~~~~            ~~~~~~~~~~~
	</script>
</html>